/*
 * @Description:
 * @Autor: fage
 * @Date: 2022-07-26 14:52:51
 * @LastEditors: chenbinfa
 * @LastEditTime: 2023-01-17 11:38:35
 * @description: 描述信息
 * @author: chenbinfa
 */
import React, { useRef, useState, useEffect } from "react";
import {
    DatePicker,
    Input,
    InputNumber,
    Menu,
    Modal,
    Button,
    Tooltip,
    Dropdown,
    Descriptions,
    Select,
    Space,
    Table,
    message,
    Tabs,
    Popconfirm,
    Checkbox,
    Card,
    Form,
    Collapse,
    Empty
} from "antd";
import { Pie } from '@ant-design/plots';
import { CopyOutlined } from "@ant-design/icons";
import _ from "lodash";
import styled from "styled-components";
import { useNavigate } from "react-router-dom";
import moment from "moment";
import { formatterCurrency, formatterCurrencyStr, toLocaleString, formatSize, formatterSize, toFixed } from "@utils/format";
import { formatArr } from "@utils/format-show-type";
import common from "@utils/common";
import copy from "copy-to-clipboard";
import api from "@services/";
import DCard from "@/components/DCard";
import { ThTable } from "@/components/ThTable";
import MList from "@/components/mobile/MList";
import * as antdHelper from "@utils/antd-helper";


const columns = [
    {
        title: "Bucket",
        dataIndex: "bucket_name",
        key: "bucket_name",
        width: "10%",
        textWrap: "word-break",
        ellipsis: true,
    },
    {
        title: "Fid",
        dataIndex: "fid",
        key: "fid",
        width: "22%",
        textWrap: "word-break",
        ellipsis: true,
        showType: "copy-link",
        link: "/file/{fid}"
    },
    {
        title: "File Name",
        dataIndex: "file_name",
        key: "file_name",
        width: "28%",
        textWrap: "word-break"
    },
    {
        title: "Size",
        dataIndex: "file_size",
        key: "file_size",
        width: "15%",
        textWrap: "word-break",
        showType: "store-size-str"
    },
    {
        title: "Uploading Time(" + common.getTimeZone() + ")",
        dataIndex: "timestamp",
        key: "timestamp",
        width: "18%",
        showType: "datetime",
        tpl: "fromNow",
    },
];


const Main = ({ className, accountInfo }) => {
    if (!accountInfo) {
        return '';
    }
    const [totle, setTotle] = useState(0);

    const props = {
        border: true,
        size: "middle",
        pagesize: 10,
        loadList: {
            params: {
                accountId: accountInfo.accountId
            },
            method: api.account.files,
            cb: {
                total: setTotle
            }
        },
        table: {
            columns,
            // expandable: {
            // 	expandIcon: ({ expanded, onExpand, record }) =>
            // 		expanded ? (
            // 			<div onClick={e => onExpand(record, e)} className="icon-expanded-open"><span></span></div>
            // 		) : (
            // 			<div onClick={e => onExpand(record, e)} className="icon-expanded-close"><span></span></div>
            // 		),
            // 	expandedRowRender: (record) => (
            // 		<div className="div-table">
            // 			<div className="tb-title">{record.event_name}</div>
            // 			<div className="tr">
            // 				<div className="td">dispatchInfo</div>
            // 				<div className="td border-left">
            // 					<div className="td-1 border-bottom">class</div>
            // 					<div className="td-2 border-bottom">weight</div>
            // 					<div className="td-1">PaysFee</div>
            // 				</div>
            // 				<div className="td border-left">
            // 					<div className="td-1 border-bottom">2</div>
            // 					<div className="td-1 border-bottom border-right">refTime</div>
            // 					<div className="td-1 border-bottom border-right">proofSize</div>
            // 					<div className="td-1">Yes</div>
            // 				</div>
            // 				<div className="td">
            // 					<div className="td-1 border-bottom"></div>
            // 					<div className="td-1 border-bottom">260,558,000</div>
            // 					<div className="td-1 border-bottom">0</div>
            // 					<div className="td-1"></div>
            // 				</div>
            // 			</div>
            // 		</div>
            // 	),
            // 	rowExpandable: false
            // }
        }
    };

    useEffect(() => {
    }, [accountInfo]);

    return (
        <div className={className}>
            <div className="o-title">
                <img src={process.env.PUBLIC_URL + "/img/files.png"} />
                Files  ({totle.toLocaleString("zh", { style: "decimal" })})
            </div>
            <div className="pc-list">
                <ThTable props={props} />
            </div>
            <div className="mobile-list">
                <Card
                    title={
                        <span>
                            <img width={19} src={process.env.PUBLIC_URL + "/img/icon_jh.png"} /> Transactions
                        </span>
                    }
                    className="myRadius">
                    <MList props={props} />
                </Card>
            </div>
        </div>
    );
};

export default React.memo(styled(Main)`
    display: block;
`);
